<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	#header {
		visibility: hidden;
	}
	#homeFooter {
		background-color: #444;
		height: 2.5rem;
		color: #adadad;
		font-size: 0.6rem;
		text-align: center;
		line-height: 1;
		z-index: 11;
	}
	#homeFooter .active {
		color: #FFF;
	}
	#homeFooter .fa {
		font-size: 0.8rem;
	}
	#homeFooter .fTxt {
		margin-top: 0.2rem;
	}
	#homeFooter .f_04:before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #FFF;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);

		visibility: hidden;
		opacity: 0;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	#homeFooter .f_04.active:before {
		visibility: visible;
		opacity: 1;
	}
	#homeFooter .f_01 .fTxt span:after {
		content: '赞';
	}
	#homeFooter .f_01.active .fTxt span:after {
		content: '已赞';
	}
	#homeFooter .f_03 .fTxt span:after {
		content: '收藏';
	}
	#homeFooter .f_03.active .fTxt span:after {
		content: '已收藏';
	}
	#homeFooter .f_05 .fTxt span:after {
		content: '积分打赏';
	}
	#homeFooter .f_05.active .fTxt span:after {
		content: '已打赏';
	}
</style>
</head>

<body>
<div id="app">
	<header class="aui-bar aui-bar-nav aui-bar-light" id="header">
<!--
		<div class="aui-pull-left back" tapmode onClick="api.closeWin();"></div>
		<div class="aui-title"></div>
		<div class="aui-pull-right headRightBtn" tapmode onClick=""><img src="../../image/common/06.png" alt=""></div>
-->
	</header>

	<footer class="aui-bar aui-bar-tab" id="homeFooter">
        <div class="aui-bar-tab-item f_01" :class="{ 'active': postInfo.is_like == 1 }" tapmode onClick="togLike();">
            <div class="fIco"><i class="fa fa-heart"></i></div>
            <div class="fTxt"><span></span> {{ postInfo.like_count }}</div>
        </div>
        <div class="aui-bar-tab-item f_02" tapmode onClick="openEva();">
            <div class="fIco"><i class="fa fa-commenting"></i></div>
            <div class="fTxt">评论 {{ postInfo.article_comment_count }}</div>
        </div>
        <div class="aui-bar-tab-item f_03" :class="{ 'active': postInfo.is_collection == 1 }" tapmode onClick="togCollect();">
            <div class="fIco"><i class="fa fa-star"></i></div>
            <div class="fTxt"><span></span> {{ postInfo.article_collect_count }}</div>
        </div>
        <div class="aui-bar-tab-item f_04" tapmode onClick="openRelate();">
            <div class="fIco"><i class="fa fa-shopping-bag"></i></div>
            <div class="fTxt">相关商品</div>
        </div>
        <div class="aui-bar-tab-item f_05" :class="{ 'active': postInfo.is_reward == 1 }" tapmode onClick="openYou();">
            <div class="fIco"><i class="fa fa-bandcamp"></i></div>
            <div class="fTxt"><span></span></div>
        </div>
	</footer>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var vm;
var vuedata = {
	userId: '',
	userInfo: {},
	postInfo: {}
};
vm = new Vue({
	el: '#app',
	data: vuedata
});

var headerH;
var footerH;
apiready = function() {
	api.parseTapmode();
	var header = $api.byId('header');
	$api.fixStatusBar(header);
	headerH = $api.offset(header).h;
	footerH = $api.offset($api.byId('homeFooter')).h;
	api.openFrame({
		name: 'post_detail_frm',
		url: 'post_detail_frm.html',
		rect: {
			x: 0,
			y: 0,
			w: 'auto',
			h: 'auto',
			marginBottom: footerH
		},
		bounces: true,
		pageParam: api.pageParam
	});
	api.openFrame({
		name: 'post_detail_head_frm',
		url: 'post_detail_head_frm.html',
		rect: {
			x: 0,
			y: 0,
			w: 'auto',
			h: headerH
		},
		bounces: false
	});
	vuedata.userInfo = getUserinfo();
	vuedata.userId = getUserId();

	//frm页面取到详情内容 返回win页面
	api.addEventListener({
		name: 'postDetailEvent'
	}, function(ret, err){
		vuedata.postInfo = ret.value.info;
	});
};
//点赞
function togLike(){
	api.ajax({
		url: BASE_URL + 'App/Article/articleLike',
		method: 'post',
		data: {
			values: {
				userid: vuedata.userId,
				article_id: vuedata.postInfo.article_id,
				article_userid: vuedata.postInfo.article_userid
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			if(ret.msg == '取消成功'){
				vuedata.postInfo.is_like = -1;
				vuedata.postInfo.like_count--;
			}else{
				vuedata.postInfo.is_like = 1;
				vuedata.postInfo.like_count++;
			}
			toast(ret.msg);
			api.sendEvent({
				name: 'postLikeEvent',
				extra: {
					id: vuedata.postInfo.article_id,
					is_like: vuedata.postInfo.is_like,
					like_count: vuedata.postInfo.like_count
				}
			});
		} else {
			toast('操作失败');
		};
	});
}
//收藏
function togCollect(){
	api.ajax({
		url: BASE_URL + 'App/Article/articleCollect',
		method: 'post',
		data: {
			values: {
				userid: vuedata.userId,
				article_id: vuedata.postInfo.article_id
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			if(ret.msg == '取消成功'){
				vuedata.postInfo.is_collection = -1;
				vuedata.postInfo.article_collect_count--;
			}else{
				vuedata.postInfo.is_collection = 1;
				vuedata.postInfo.article_collect_count++;
			}
			toast(ret.msg);
		} else {
			toast('操作失败');
		};
	});
}
//关闭相关商品
function closeRelate(){
	$$('#homeFooter .f_04').removeClass('active');
	api.closeFrame({
		name: 'mask_relate_product'
	});
}
//打开相关商品
function openRelate(){
	if(!vuedata.postInfo.goods.length){
		toast('没有相关商品');
		return;
	}
	$$('#homeFooter .f_04').toggleClass('active');
	if($$('#homeFooter .f_04').hasClass('active')){
		api.openFrame({
			name: 'mask_relate_product',
			url: 'mask_relate_product.html',
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: 'auto',
				marginBottom: footerH
			},
			bounces: false,
			animation: {
				type: 'fade',
				duration:300
			},
			pageParam: {
				wname: api.winName,
				fname: api.frameName,
				postInfo: vuedata.postInfo
			}
		});
	}else{
		api.closeFrame({
			name: 'mask_relate_product'
		});
	}

}
//打开评论
function openEva(){
	api.openWin({
		name: 'post_eva_list_win',
		url: 'post_eva_list_win.html',
		pageParam: {
			article_id: vuedata.postInfo.article_id
		}
	});
}

//打赏
function openYou(){
	api.openWin({
		name: 'yo_money_win',
		url: 'yo_money_win.html',
		pageParam: {
			postInfo: vuedata.postInfo
		}
	});
}
//打赏成功
function ub(){
	vuedata.postInfo.is_reward = 1;
}
//删除文章
function delPostAlert(){
	var confirmMaskTxt = ['确认删除这篇文章么？','取消','确认删除'];
	openConfirmMask(confirmMaskTxt,'delpost()');
}
function delpost(){
	api.ajax({
		url: BASE_URL + 'App/Article/articleDelete',
		method: 'post',
		data: {
			values: {
				userid: vuedata.userId,
				id: vuedata.postInfo.article_id
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			toast('删除成功');
			api.sendEvent({
				name: 'postListUpdateEvent'
			});
			setTimeout(function(){
				api.closeWin();
			},1500);
		} else {
			toast('操作失败');
		};
	});
}
</script>
</html>
